import { View } from '@tarojs/components'
import { memo } from 'react'
import { AddOutlined } from "@taroify/icons"
import { Empty as IfyEmpty } from "@taroify/core"
import { QrcodeTabEnum } from '../../interface'
import './index.scss'

interface Props {
  tab: QrcodeTabEnum
}

function Empty({ tab }: Props) {
  // 处理新建
  const handleCreate = () => {
    if (tab === QrcodeTabEnum.STAFF) {
      console.log('新建员工活码')
      // TODO: 跳转到新建员工活码页面
    } else {
      console.log('新建群活码')
      // TODO: 跳转到新建群活码页面
    }
  }

  return (
    <View className='qrcode-empty'>
       <IfyEmpty>
        <IfyEmpty.Image className='qrcode-empty__image'></IfyEmpty.Image>
        <View className='qrcode-empty__text'>
          {tab === QrcodeTabEnum.STAFF ? '暂无员工活码' : '暂无群活码'}
        </View>
        <View className='qrcode-empty__button' onClick={handleCreate}>
          <AddOutlined size={20} />
          <View className='qrcode-empty__button-text'>
            {tab === QrcodeTabEnum.STAFF ? '新建员工活码' : '新建群活码'}
          </View>
        </View>
       </IfyEmpty>
    </View>
  )
}

export default memo(Empty)
